@mixin extend-click() {
  position: relative;
  &:before {
    position: absolute;
    top: -.133333rem;
    right: -.133333rem;
    bottom: -.133333rem;
    left: -.133333rem;
    content: '';
  }
}

@mixin bg-image($url) {
  background-image: url($url) '@2x.png';
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url) '@3x.png';
  }
}

@mixin text-overflow($line) {
  display:-webkit-box;  overflow:hidden;  -webkit-box-orient:vertical; text-overflow:ellipsis;

  -webkit-line-clamp:$line; 
  }

@mixin cm() {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

@mixin ca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin cf() {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin cflex() {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin ct {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin cl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@mixin wh ($width, $height){
  width: $width;
  height: $height;
}

@mixin mid ($height) {
  height: $height;
  line-height: $height;
}

@mixin dprFont($size) {
  font-size: $size + PX;
  [data-scale="scale-font"] & {
    font-size: ($size * 2) + px;
  }
}
